<template>
  <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="table-list min-fill-page">
    <dataDisplay :data-list="dataList" style="margin-bottom: 20px;" class="mobile-data data-margin"/>
    <div v-if="!showMobilePage" class="filter-input-box">
      <FilterInput
        v-model="filterInput"
        :filter-list="filterList"
        show-search-btn
        class="FilterTool"
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus" />
      <div class="table-top-opeator-bar">
        <createBtn v-if="hasRouteAuth('crm:accounts:add')" text="添加账号" style="margin-right: 10px;" @click.native="handleCreate" />
        <MoreOpeator
          v-if="hasRouteAuth('crm:accounts:health') || hasRouteAuth('crm:accounts:operator') || hasRouteAuth('crm:accounts:monitor') || hasRouteAuth('crm:accounts:import') || hasRouteAuth('crm:accounts:export')"
          ref="btnGroupRef"
          :list="moreOperatorList"
        />
      </div>
    </div>
    <div v-loading="loading" style="min-height: 300px">
      <u-table
        v-if="list.items.length > 0"
        ref="customerTableRef"
        :data="list.items"
        :border="true"
        :row-height="rowHeight()"
        :height="setTableHeight"
        beautify-table
        header-drag-style
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row
        @sort-change="sortMethod"
        @select="selectTable"
        @select-all="selectTable"
      >
        <u-table-column
          :fixed="selectFixed"
          align="center"
          type="selection"
          width="50"/>
        <u-table-column align="left" label="账号">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.account" :is-can-click="Boolean(!dimension)" @handelClick="goDetail(scope.row.id)" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="账号状态">
          <template slot-scope="scope">
            <StatusText
              v-if="scope.row.account && (scope.row.accountStatus || scope.row.accountStatus === 0)"
              :color="['#FD8546', '#31CC9C', '#FF4E5F'][scope.row.accountStatus]"
              :text="scope.row.accountStatus | filterAccountStatus" />
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="微博主页链接" width="120">
          <template slot-scope="scope">
            <el-tooltip
              v-if="scope.row.link && (scope.row.link.indexOf('http://') === 0 || scope.row.link.indexOf('https://') === 0)"
              :open-delay="800"
              class="item"
              placement="top"
              effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.link }}</div>
              <a
                :href="scope.row.link"
                target="_blank"
                class="link-name light-word">
                点击跳转<img src="../../../assets/medium/publish-link.png" alt="link-icon">
              </a>
            </el-tooltip>
          </template>
        </u-table-column>
        <u-table-column align="left" label="平台">
          <template slot-scope="scope">
            <div style="display: flex;">
              <platformIcon :data="scope.row.platformTypeName" />
              <ToolTip :content="scope.row.platformTypeName" />
            </div>
          </template>
        </u-table-column>
        <u-table-column v-if="!dimension" align="left" label="运营人员">
          <template slot-scope="scope">
            <ToolTip :content="getOperators(scope.row.accountOperation)" />
          </template>
        </u-table-column>
        <u-table-column v-if="!dimension" align="left" label="微博/未达标" sortable="custom" prop="percent" min-width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.percent" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="监测状态">
          <template slot-scope="scope">
            <StatusText
              v-if="scope.row.monitoringStatus || scope.row.monitoringStatus === 0"
              :color="['#FD8546', '#999', '#FF4E5F'][scope.row.monitoringStatus]"
              :text="scope.row.monitoringStatus | monitoringStatus" />
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" align="left" label="当前全部微博" min-width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.allWeibo" :is-can-click="true" @handelClick="goWeiboList(scope.row, 1)"/>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" align="left" label="异常发文" min-width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.abnormalWeibo" :is-can-click="true" @handelClick="goWeiboList(scope.row, 2)"/>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" align="left" label="7日内异常发文" min-width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.abnormalWithinSeven" :is-can-click="true" @handelClick="goWeiboList(scope.row, 3)"/>
          </template>
        </u-table-column>
        <u-table-column
          v-if="dimension"

          align="left"
          sortable="custom"
          prop="unpublishedDays"
          label="未发文天数"
          min-width="130">
          <template slot-scope="scope">
            <div v-if="scope.row.unpublishedDays || scope.row.unpublishedDays === 0">{{ scope.row.unpublishedDays }}</div>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column
          v-if="dimension"
          align="left"
          prop="unpublishedNotify"
          label="发文通知规则"
          min-width="130">
          <template slot-scope="scope">
            <ToolTip
              v-if="scope.row.unpublishedNotify && scope.row.unpublishedNotify.length"
              :content="getUnpublishedNotify(scope.row.unpublishedNotify)"/>
            <div v-else>未配置</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="创建时间" sortable="custom" prop="createTime" min-width="110">
          <template slot-scope="scope">
            <div v-if="scope.row.createTime">{{ scope.row.createTime | standardFormatNoHour('YYYY/MM/DD') }}</div>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="更新时间" sortable="custom" prop="updateTime" min-width="110">
          <template slot-scope="scope">
            <div v-if="scope.row.updateTime">{{ scope.row.updateTime | standardFormatNoHour('YYYY/MM/DD') }}</div>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column :width="showMobilePage ? 50 : (dimension ? 80 : 110)" :align="operateAlign" label="操作">
          <template slot-scope="scope">
            <div v-if="!showMobilePage" style="display:flex;">
              <el-button v-if="!dimension" :disabled="scope.row.monitoringStatus === 2 || !scope.row.account" type="text" class="button-text" style="padding: 0;margin: 0;font-size: 14px;" @click="goDetail(scope.row.id)">查看</el-button>
              <el-dropdown trigger="click">
                <div :class="{'el-dropdown-link': !dimension}">
                  <el-button class="button-text" type="text"><span style="font-size:14px;">更多<i class="el-icon-arrow-down"/></span></el-button>
                </div>
                <el-dropdown-menu slot="dropdown" style="margin-top:-24px;margin-right:15px;padding: 0;">
                  <el-dropdown-item v-if="hasRouteAuth('crm:accounts:stateSet')" :disabled="!scope.row.account" style="text-align: center" @click.native="setAccountState(1, scope.row)">
                    <div>账号状态设置</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showMonitorBtn" :disabled="!scope.row.account" style="text-align: center" @click.native="onMonitoringSet(scope.row.id, 'single', scope.row.monitoringStatus)">
                    <div>监测设置</div>
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="scope.row.monitoringStatus !== 2" style="text-align: center" @click.native="handleDelete(scope.row.id)">
                    <div>删除</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <tableOperateBtn v-else>
              <el-dropdown-item v-if="!dimension" :disabled="scope.row.monitoringStatus === 2 || !scope.row.account" style="width:90px;text-align: center" @click.native="goDetail(scope.row.id)">
                <div style="font-size: 14px">查看</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="hasRouteAuth('crm:accounts:stateSet')" :disabled="!scope.row.account" style="text-align: center" @click.native="setAccountState(1, scope.row)">
                <div>账号状态设置</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="showMonitorBtn" :disabled="!scope.row.account" style="width:90px;text-align: center" @click.native="onMonitoringSet(scope.row.id, 'single', scope.row.monitoringStatus)">
                <div>监测设置</div>
              </el-dropdown-item>
              <el-dropdown-item :disabled="scope.row.monitoringStatus !== 2" style="width:90px;text-align: center" @click.native="handleDelete(scope.row.id)">
                <div>删除</div>
              </el-dropdown-item>
            </tableOperateBtn>
          </template>
        </u-table-column>
      </u-table>
      <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
    </div>
    <el-row v-if="showMobilePage" type="flex" justify="left">
      <el-pagination
        v-show="list.total > 0"
        :current-page.sync="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :small="true"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="pageLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <addAccountComponent ref="addAccount" @submit="handleAddAccount" />
    <accountOperation ref="accountOperation" is-cache @submit="handleAccountOperation" />
    <monitoringSet ref="monitoringSet" @submit="handleMonitoringSet" />
    <HealthValue ref="healthValueSet" is-cache @submit="handleHealthValueSet" />
    <SetAccountState ref="setAccountState" @refreshData="refreshData"/>
    <fixed-pagination>
      <template v-if="showMobilePage">
        <FilterInput
          v-model="filterInput"
          :filter-list="filterList"
          show-search-btn
          class="FilterTool"
          show-mobile-icon
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus" />
        <MoreOpeator
          v-if="hasRouteAuth('crm:accounts:health') || hasRouteAuth('crm:accounts:operator') || hasRouteAuth('crm:accounts:monitor') || hasRouteAuth('crm:accounts:import') || hasRouteAuth('crm:accounts:export')"
          ref="btnGroupRef"
          :list="moreOperatorList"
          show-mobile-icon
        />
        <createBtn v-if="hasRouteAuth('crm:accounts:add')" mobile-table text="添加账号" style="margin-right: 10px;" @click.native="handleCreate" />
      </template>
      <template v-else>
        <div class="pagi-container">
          <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
        </div>
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </template>
    </fixed-pagination>
    <SetNotifyRule
      ref="SetNotifyRuleRef"
      :unpublished-notify-list="unpublishedNotifyList"
      @freshData="refreshData" />
  </div>
</template>

<script>

import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createBtn from '@/components/Common/baseComponent/createBtn';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import platformIcon from '@/components/Common/platformIcon';
import addAccountComponent from '../components/addAccount';
import monitoringSet from '../components/monitoringSet';
import accountOperation from '../components/accountOperation';
import HealthValue from '@/components/HealthValue';
import SetAccountState from '../components/setAccountState.vue';
import { getAccountsList, addAccount, setMonitoring, setOperators, deleteAccount, setHealthValue } from '@/api/accounts';
import { hasRouteAuth } from '@/utils/permission';
import ElMessage, { showModal } from '@/utils/message';
import { monitoringStatus, filterAccountStatus } from '@/filters/status';
import { standardFormatNoHour } from '@/filters/date';
import TableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import icon_12 from '@/assets/dataDisplay/icon_12.png';
import icon_13 from '@/assets/dataDisplay/icon_13.png';
import { getUnpublished } from '@/api/setting';
import SetNotifyRule from '../components/setNotifyRule';

export default {
  components: {
    createBtn,
    MoreOpeator,
    EmptyPlaceholder,
    platformIcon,
    addAccountComponent,
    monitoringSet,
    accountOperation,
    HealthValue,
    dataDisplay,
    SetAccountState,
    SetNotifyRule
  },
  filters: {
    standardFormatNoHour,
    monitoringStatus,
    filterAccountStatus
  },
  mixins: [TableAdaptive, TableSelections, mobileTable],
  props: {
    count: {
      type: Number,
      default: null
    },
    total: {
      type: Number,
      default: null
    },
    dataLoading: {
      type: Boolean,
      default: false
    },
    dimension: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      page: 1,
      perPage: 20,
      filterInput: {},
      loading: false,
      sortName: '',
      sortType: '',
      setMonitoringType: '',
      list: {
        total: 0,
        page: 1,
        perPage: 20,
        items: [],
        isInit: true
      },
      unpublishedNotifyList: [],
      idKey: 'id',
      isUmyTable: true,
      tableRefName: 'customerTableRef',
      healthOptions: [
        { value: 0, label: '正常' },
        { value: 1, label: '存在未达标' }
      ],
      monitoringOptions: [
        { value: 0, label: '监测中' },
        { value: 1, label: '已暂停' },
        { value: 2, label: '无效链接' }
      ],
      rangeKeyArr: [{
        attr: 'createTime',
        start: 'createTimeStart',
        end: 'createTimeEnd',
        type: 'time'
      }, {
        attr: 'updateTime',
        start: 'updateTimeStart',
        end: 'updateTimeEnd',
        type: 'time'
      },
      { attr: 'unpublishedDays', start: 'unpublishedDaysStart', end: 'unpublishedDaysEnd', type: 'number' }]
    };
  },
  computed: {
    dataList() {
      return [
        { label: '账号数量', data: this.total, isCanFilter: false, icon: icon_12, isMoney: false },
        { label: '监测中账号数量', data: this.count, isCanFilter: false, icon: icon_13, isMoney: false }
      ];
    },
    filterList() {
      const arr = [
        { keyword: 'account', name: '账号', type: 'input', placeholder: '请输入账号名称', labelWidth: '100px' },
        { keyword: 'link', name: '微博主页链接', type: 'input', placeholder: '请输入微博主页链接', labelWidth: '100px' },
        { keyword: 'operator', name: '运营人员', type: 'input', placeholder: '请输入运营人员', labelWidth: '100px' },
        { keyword: 'monitoringStatus', name: '监测状态', type: 'select', options: this.monitoringOptions },
        { keyword: 'createTime', name: '创建时间', type: 'rangeDate', timeType: 'daterange', format: 'yyyy/MM/dd', labelWidth: '100px' },
        { keyword: 'updateTime', name: '更新时间', type: 'rangeDate', timeType: 'daterange', format: 'yyyy/MM/dd', labelWidth: '100px' }

      ];
      if (!this.dimension) {
        arr.push({ keyword: 'healthStatus', name: '健康状态', type: 'select', options: this.healthOptions });
      } else {
        arr.push({ keyword: 'unpublishedDays', min: 0, onlyInteger: true, labelWidth: '100px', name: '未发文天数', type: 'inputRange' });
        arr.push({ keyword: 'unpublishedNotifyId', name: '发文通知规则', type: 'mulSelect', filterable: true,
          options: [{ id: -1, ruleName: '未配置' }, ...this.unpublishedNotifyList], valueName: 'id', labelName: 'ruleName' });
      }
      return arr;
    },
    tableOutsideHeight() {
      return 250;
    },
    moreOperatorList() {
      const arr = [
        { label: '账号状态设置', handelClick: this.setAccountState, auth: hasRouteAuth('crm:accounts:stateSet') },
        { label: '监测设置', handelClick: this.onMonitoringSet, auth: this.dimension ? hasRouteAuth('crm:accounts:collectStop') : hasRouteAuth('crm:accounts:monitor') },
        { label: '通知规则设置', handelClick: this.setNotifyRule, auth: this.dimension && hasRouteAuth('crm:accounts:notify') },
        { label: '导入模板下载', exportApi: 'admin/accounts/template/export', auth: hasRouteAuth('crm:accounts:import'), exportName: '账号监测导入模板', type: 'export' },
        { label: '导出', exportApi: 'admin/accounts/export', auth: hasRouteAuth('crm:accounts:export'), exportName: '账号列表', beforeExport: this.beforeExport, type: 'export', isBeforeExport: true, refName: 'accountsExportRef' },
        { label: '导入', type: 'import', callback: this.fetchData, auth: hasRouteAuth('crm:accounts:import'), importApi: 'admin/accounts/import', extendParams: { origin: this.dimension }}
      ];
      if (!this.dimension) {
        arr.push({ label: '健康值设置', handelClick: this.handleHealth, auth: hasRouteAuth('crm:accounts:health') });
        arr.push({ label: '运营人员设置', handelClick: this.handleOperation, auth: hasRouteAuth('crm:accounts:operator') });
      }
      return arr;
    },
    showMonitorBtn() {
      return this.dimension ? hasRouteAuth('crm:accounts:collectStop') : hasRouteAuth('crm:accounts:monitor');
    }
  },
  watch: {
    dimension() {
      this.$emit('update');
      this.clearMixinSelection();
      this.fetchData(true);
    }
  },
  created() {
    const { link, operator } = this.$route.query;
    if (link) {
      this.$set(this.filterInput, 'link', link);
    }
    if (operator) {
      this.$set(this.filterInput, 'operator', operator);
      this.$set(this.filterInput, 'monitoringStatus', 1);
    }
    this.fetchData(true);
    this.getUnpublishedRole();
  },
  methods: {
    hasRouteAuth,
    formatParams(pageConfig = false) {
      const params = JSON.parse(JSON.stringify(this.filterInput));
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(['unpublishedNotifyId'], params);
      params.origin = this.dimension;
      if (pageConfig) {
        params.page = this.page;
        params.perPage = this.perPage;
      }
      return params;
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.formatParams(true);
      if (this.sortName) {
        params.sortName = this.sortName;
      }
      if (this.sortType) {
        params.sortType = this.sortType;
      }
      this.loading = true;
      getAccountsList(params).then(res => {
        if (res.code === 200) {
          this.list = res.data;
          this.loading = false;
          this.list.isInit = false;
          if (this.setSelectRow) this.setSelectRow(res.data.items);
        }
      }, _ => {
        this.loading = false;
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    getUnpublishedRole() {
      getUnpublished({ page: 1, perPage: 1000 }).then(res => {
        if (res.data.items) {
          // ruleName \,id
          this.unpublishedNotifyList = res.data.items;
        }
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.filterInput = {};
      this.fetchData(true);
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    // 运营人员
    getOperators(data) {
      let res = '';
      if (!data || !data.length) {
        res = '--';
      } else {
        res = data.map(it => it.userName).join(',');
      }
      return res;
    },
    goDetail(id) {
      this.$router.push({
        name: 'accountsDetail',
        params: { id }
      });
    },
    handleCreate() {
      this.$refs['addAccount'].openDialog();
    },
    handleAddAccount(params) {
      params.origin = this.dimension;
      addAccount(params).then(res => {
        if (res.code === 200) {
          this.$refs['addAccount'].handleClose();
          this.fetchData(true);
          this.$emit('update');
          this.$message.success('添加成功');
        }
      }).catch(err => {
        console.error(err.message);
        this.$refs['addAccount'].loading = false;
      });
    },
    handleMonitoringSet(params) {
      if (this.multipleSelectionAll.length && !this.setMonitoringType) {
        params.ids = this.multipleSelectionAll.map(it => it.id).join(',');
      }
      params.origin = this.dimension;
      setMonitoring(params).then(res => {
        if (res.code === 200) {
          this.$refs['monitoringSet'].handleClose();
          this.fetchData(true);
          this.$emit('update');
          this.$message.success('操作成功');
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    handleAccountOperation(params) {
      if (this.multipleSelectionAll.length && !this.setMonitoringType) {
        params.ids = this.multipleSelectionAll.map(it => it.id).join(',');
      }
      setOperators(params).then(res => {
        if (res.code === 200) {
          this.$refs['accountOperation'].handleClose();
          this.fetchData(true);
          this.$message.success('操作成功');
        }
      });
    },
    beforeExport() {
      const params = this.formatParams();
      if (this.multipleSelectionAll.length) {
        params.ids = this.multipleSelectionAll.map(it => it.id).join(',');
      }
      if (this.$refs.btnGroupRef) {
        this.$refs.btnGroupRef.btnExport(params, 'accountsExportRef');
      }
    },
    handleHealth() {
      if (!this.multipleSelectionAll.length) {
        showModal('确定对所有账号进行健康值设置?', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).then(() => {
          this.$refs['healthValueSet'].openDialog();
        }).catch(() => {
          return;
        });
      } else {
        this.$refs['healthValueSet'].openDialog();
      }
    },
    handleHealthValueSet(data) {
      const params = { data };
      if (this.multipleSelectionAll.length) {
        params.ids = this.multipleSelectionAll.map(it => it.id).join(',');
      }
      setHealthValue(params).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.$refs['healthValueSet'].handleClose();
          this.fetchData(true);
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    handleOperation() {
      if (!this.multipleSelectionAll.length) {
        showModal('确定对所有账号进行运营人员设置?', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).then(() => {
          this.$refs['accountOperation'].openDialog();
        }).catch(() => {
          return;
        });
      } else {
        this.$refs['accountOperation'].openDialog();
      }
    },
    onMonitoringSet(id, type, status) {
      this.setMonitoringType = type || ''; // 区分单个还是批量
      if (!this.multipleSelectionAll.length && !type) {
        showModal('确定对所有账号进行监测设置?', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).then(() => {
          this.$refs['monitoringSet'].openDialog();
        }).catch(() => {
          return;
        });
      } else {
        this.$refs['monitoringSet'].openDialog(id, status);
      }
    },
    handleDelete(id) {
      this.$confirm('是否确认删除微博账号?', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        deleteAccount({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            if (this.page > 1 && this.perPage * (this.page - 1) + 1 === this.list.total) {
              this.page--;
            }
            this.resetItemSelected(id);
            this.$emit('update');
            this.fetchData(true);
          }
        }).catch(err => {
          this.$message.error(err.message);
        });
      }).catch(() => {
        return;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    goWeiboList(row, type) {
      const query = { type: 1, dimension: 1 };
      query.account = row.account;
      if (type !== 1) {
        query.pickStatus = 3;
      }
      if (type === 3) {
        const end = Date.parse(new Date());
        const start = end - 604800000;
        query.abnormalTime = [start, end];
      }
      const url = this.$router.resolve({
        name: 'accounts',
        query
      });
      window.open(url.href, '_blank');
    },
    setAccountState(isSetSingleAccount = 0, row) {
      if (isSetSingleAccount) {
        this.$refs.setAccountState.openDialog(row);
      } else if (!this.multipleSelectionAll || this.multipleSelectionAll.length === 0) {
        ElMessage.warning('请先选择账号！');
      } else {
        this.$refs.setAccountState.openDialog(this.multipleSelectionAll);
      }
    },
    refreshData() {
      this.clearMixinSelection();
      this.fetchData();
    },
    getUnpublishedNotify(unpublishedNotifyList) {
      return unpublishedNotifyList.map(i => i.name).join('、');
    },
    setNotifyRule() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length === 0) {
        ElMessage.warning('未选择账号，请选择要设置的账号');
      }
      this.$refs.SetNotifyRuleRef.openDialog(this.multipleSelectionAll);
    }
  }
};
</script>

<style lang="scss" scoped>
.mobile-table {
  .data-margin {
    margin-bottom: 12px !important;
  }
}
.table-list {
  .light-word{
    color: #406eff;
  }
  .link-name{
    display: flex;
    align-items: center;
    img{
      width: 14px;
      height: 15px;
      margin-left: 4px;
    }
  }
  .el-dropdown-link {
    display: block;
    position: relative;
    padding-left:6px;
    margin-left: 6px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -7px;
      width: 1px;
      background: #ddd;
      height: 14px;
    }
  }
  .pagi-container {
    flex:1;
    height: 32px;
    display: flex;
    align-items: center;
  }
}
</style>
